<template>
  <div class="header"  v-if="!isBackShow">
    <span class="icon menu" v-if="$route.name === 'ListPage' || $route.name === 'Search' || $route.name === 'SearchShopList'" @click="$router.back()">{{ title }}</span>
    <span class="icon menu" v-else>{{ title }}</span>
    <van-icon name="manager-o" class="icon admin"/>
    <van-search
      v-model="value"
      shape="round"
      background="#fdde4a"
      placeholder="请输入搜索关键词"
      v-if="haveSearch"
      @focus="goSearch"
      @search="toSearchShopList"
    />
    <van-search
      v-model="value"
      shape="round"
      background="#fdde4a"
      placeholder="111"
      style="visibility: hidden;"
      v-else
    />
  </div>
  <div class="header" v-else>
    <div class="back" @click="goBack">
      <van-icon name="arrow-left" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      value: '',
      isTabbar: true,
      haveSearch: true
    }
  },
  watch: {
    $route (to, from) {
      if (to.meta.haveSearch) {
        this.haveSearch = true
      } else {
        this.haveSearch = false
      }
    }
  },
  created () {
    // console.log(this.isBackShow)
    this.haveSearch = this.$route.meta.haveSearch
  },
  computed: {
    ...mapState(['isBackShow', 'title'])
  },
  methods: {
    goBack () {
      this.$router.back()
    },
    goSearch () {
      if (this.$route.name !== 'Search') {
        this.$router.push('/search')
      }
    },
    toSearchShopList () {
      // console.log(this.value)
      this.$router.push({
        name: 'SearchShopList',
        query: { word: this.value }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  background: #fdde4a;
  .van-search {
   padding: 10px 40px;
   background: #f2f2f2;
  }
  .back {
    position: fixed;
    left: 20px;
    top: 20px;
    z-index: 999;
    background-color: rgba(0,0,0,.5);
    font-size: 24px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      line-height: 40px;
      color: white;
    }
  }
  .icon {
    position: fixed;
    font-size: 25px;
    top: 15px;
    color: white;
  }
  .menu {
    left: 4px;
    font-size: 17px;
    top: 15px;
  }
  .admin {
    right: 6px;
  }
}
</style>
